<template>
    <div class="page">
        <div class="fortouch">
            <img src="../assets/images/qr.gif" />
        </div>
        <h6 class="logo"></h6>
        <div class="qr">
            <div class="pic">
                <img src="../assets/images/qr.gif" />
            </div>
            <p>长按二维码<br/>了解更多推介会详情</p>
        </div>
        <div class="bg fadeBg" :class="{done:done}"></div>
    </div>
</template>

<script>
export default {
    name: 'page',
    props: ['animate'],
    data () {
        return {
            done: false
        }
    },
    methods: {
        pageInit() {
            this.done = true;
        }
    },
    mounted () {
        if (this.animate) {
            this.pageInit();
        }
    },
    watch: {
        animate(v) {
            if (v && !this.done){
                this.pageInit();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .fortouch {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: block;
        opacity: 0;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/bg_p6.jpg");
        background-position: center center;
        background-size: cover;
    }
    .logo {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 1rem;
        transform: translate(-50%, 0);
        background: url("../assets/images/logo.png");
        background-size: 100% 100%;
        width: 3rem;
        height: 3rem;
    }
    .qr {
        position: absolute;
        z-index: 2;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-top: 1.5rem;
        .pic {
            width: 2.6rem;
            height: 2.6rem;
            border: 0.05rem solid #fff;
            border-radius: 0.15rem;
            overflow: hidden;
            margin-bottom: 0.1rem;
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
        p {
            color: #fff;
            font-size: 0.26rem;
            line-height: 1.5;
            text-align: center;
        }
    }
}
</style>
